<template>
<!-- 活动组件 -->
  <a-card class="activityAssign">
    <a-card-grid
      v-if="activityData.question && activityData.question.title != undefined"
      style="width: 98.5%; text-align: center"
    >
    <div class="activity">
       <div class="activity-question">
        <!--<a-page-header
          class="activity-question-title"
          style="border: 1px solid rgb(235, 237, 240)"
          title="题目"
          :sub-title="activityData.question.title"
        />-->
        <div class="activity-question-title" >
          <div class="activity-question-title-label">题目:</div>
            <div class="activity-question-title-context">{{ activityData.question.title }}</div>
          </div> 
        <div class="activity-question-optionGroup">
          <div class="activity-question-optionGroup-option"
            v-for="(option, index) in activityData.question.options"
            :key="index"
          >
           <!-- {{ `${option.value}:${option.text}` }}-->
           <div class="activity-question-optionGroup-option-optionLabel">{{option.value}}</div>
              <div class="activity-question-optionGroup-option-optionText"> {{option.text}} </div>
          </div>
        </div>

        <div class="activity-question-answer" v-if="activityData.question.right_answer">
            正确答案:{{ activityData.question.right_answer }}
        </div>

      </div>
      <div class="activity-chart">
        <x-chart
          :option="option"
          :id="activityData._id"
          width="100px"
          height="100px"
          v-if="this.option.series[0].data.length"
        ></x-chart>
      </div>
    </div>
    </a-card-grid>
  </a-card>
</template>
<script>
import XChart from "./Hchart";

export default {
  components: {
    XChart,
  },
  props: {
    activityData: Object,
    activityTitle: String,
  },
  data() {
    return {
      // 饼状图
      option: {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: this.activityTitle,
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              connectorColor: "silver",
            },
          },
        },
        series: [
          {
            name: "Brands",
            colorByPoint: true,
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    console.log(
      "🚀 ~ file: activityItem.vue ~ line 46 ~ activityData",
      this.activityData
    );
    let answerResult = [
      {
        name: "A",
        y: 0,
        selected: true,
      },
      {
        name: "B",
        y: 0,
        selected: true,
      },
      {
        name: "C",
        y: 0,
        selected: true,
      },
      {
        name: "D",
        y: 0,
        selected: true,
      },
      {
        name: "E",
        y: 0,
        selected: true,
      },
      {
        name: "F",
        y: 0,
        selected: true,
      },
      {
        name: "G",
        y: 0,
        selected: true,
      },
      {
        name: "未作答",
        y: 0,
        selected: true,
      },
    ];
    this.activityData.studentAnswerList.forEach((raceItem) => {
      if (raceItem.joinFlag) {
        answerResult.forEach((answerResultItem) => {
          if (answerResultItem.name == raceItem.answerSelection) {
            answerResultItem.y++;
          }
        });
      } else {
        answerResult[7].y++;
      }
    });
    console.log(
      "🚀 ~ file: activityItem.vue ~ line 176 ~ this.activityData.studentAnswerList.forEach ~ answerResult",
      answerResult
    );
    this.option.series[0].data = answerResult;
  },
  methods: {},
};
</script>
<style scoped>
/*

.optionGroup {
  display: flex;
  flex-flow: row wrap;
}
.optionGroup > div {
  font-size: 20px;
  width: 35%;
  margin: 30px;
  display: flex;
  flex-flow: row wrap;
}
.optionLabel{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #4ABAC4;
    color: #fff;
    margin: 0px 12px;
}
.answer{
  font-size: 17px;
  text-align: initial;
  margin: 35px 15px;
  }*/
  .ant-card-grid{
    margin: 10px;
   
  }
</style>